イメージマップの応用
前回の講座では四角形で範囲指定するイメージマップの作成方法を紹介しましたが、イメージマップでは円形や多角形で範囲を指定することも可能です。今週は、イメージマップを応用するためのテクニックを紹介します。

→ 円形や多角形で範囲を指定する
 
イメージマップの範囲指定では、「AREA」タグのshape属性を変更することで、円形や多角形の範囲をリンクとして指定することも可能です。円形で範囲を指定する場合は、shape属性の値を「circle」とし、coords属性に中心のX座標、Y座標、半径という3つの数値を指定します。多角形で指定する場合は、shape属性の値を「poly」とし、coords属性には頂点のX座標、Y座標を順に記述していきます。ただし、このとき最初と最後の座標を同じにしておく必要があります。
<IMG src="image.jpg" border="0" usemap="#imagemap">
<MAP name="imagemap">
  <AREA href="maru.html" shape="circle" coords="100,100,50">
  <AREA href="sannkaku.html" shape="poly" coords="280,50,230,150,330,150,280,50">
</MAP>


→ 範囲指定していない部分にもリンクを作成する
 
範囲指定した部分以外にもリンクを作成する場合は、「AREA」タグのshape属性を「default」とします。すると、「rect」「circle」「poly」で指定した範囲以外の部分についてもリンクを作成できるようになります。ただし、この機能はNetscape Navigatorのみ有効で、Internet Explorerでは正しく動作しません。
<IMG src="image.jpg" border="0" usemap="#imagemap">
<MAP name="imagemap">
  <AREA href="maru.html" shape="circle" coords="100,100,50">
  <AREA href="sannkaku.html" shape="poly" coords="280,50,230,150,330,150,280,50">
  <AREA href="sonota.html" shape="default">
</MAP>


G|Cg|C@Amazon Yahoo yV

z[y[W yVoC[UNLIMIT1~] COiq COsI